<template xmlns="http://www.w3.org/1999/html">
    <div>
        <div style="height: auto;max-width: 100%">
            <!--返回按钮-->
            <el-tag plain @click="back" class="el-icon-back" type="success" size="medium">返回主页</el-tag>
            <!-- 轮播图-->
            <el-carousel :interval="4000" type="card" height="200px" style="width: 415px">
                <el-carousel-item v-for="(img,index) in imgList" :key="index">
                    <img :src="img" width="100%" height="100%">
                </el-carousel-item>
            </el-carousel>
            <div>
                <!--商品名称-->
                <h1 style="font-size: 30px;text-align: center">{{ shopdetail.shopname }}</h1>
                <!--商品信息-->
                <el-tag type="warning" style="font-size: 25px;margin-left: 34%">商品描述：</el-tag><br>
                <input style="font-size:21px;background-color:  transparent;outline: none;border: 0px;width:400px;height:50px;word-break:break-all" type="text" :value="shopdetail.shoptext">
            </div>
            <div class="prize_bar">
                <!--商品价格-->
                <div class="show_prize fl">￥<em>{{ shopdetail.price }}</em></div>
                <!--商品剩余数量-->
                <div class="show_unit fl">剩余数量：{{ shopdetail.quantity }}</div>
            </div>
            <!--    <div class="goods_num clearfix">-->
            <!--      购买数量：-->
            <!--      <el-input-number v-model="buyNum" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>-->
            <!--    </div>-->

            <!--    <div class="total">总价：<em>{{shopdetail.price*buyNum}}元</em></div>-->
            <!--      商家信息-->
            <div><el-descriptions title="商家信息" :column="2" border>
                <el-descriptions-item label="商家头像"><img :src="imgurl" alt="请上传头像" class="userMessage"></el-descriptions-item>
                <el-descriptions-item label="商家昵称">{{shopdetail.usernickname}}</el-descriptions-item>
                <el-descriptions-item label="校区"><el-tag size="small">{{shopdetail.campus}}</el-tag></el-descriptions-item>
                <el-descriptions-item label="学院"><el-tag type="success" size="small">{{shopdetail.academy}}</el-tag></el-descriptions-item>
                <el-descriptions-item label="微信号">{{shopdetail.wxid}}</el-descriptions-item>\
                <el-descriptions-item label="联系地址">{{shopdetail.fulladdress}}</el-descriptions-item>
            </el-descriptions></div>
            <div class="operate_btn">
                <a href="" class="buy_btn">联系商家</a>
                <el-button v-if="this.$store.state.role == '超级管理员'" type="success" style="margin-left: 20px" plain
                           @click="Approvebutton">下架该商品
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {getAvatar, Removalofproducts} from "@/views/shopdetail/shopdetail.js";

export default {
    name: "index.vue",
    data() {
        return {
                //存储商家头像路径
            imgurl:'',
           //存储用户数据
            shopdetail: {},
            //存储所展示的商品图片
            imgList: [],
            //购买数量
            buyNum: 1

        }
    },
    mounted() {
        //json字符串转化为js对象
        this.shopdetail = JSON.parse(this.$route.query.string)
        // console.log(this.shopdetail)
        this.shopimgassignment()
        //进入页面自动加载
        this.getuseravatar()
    },
    methods: {
        //管理员下架该商品
        Approvebutton(){
            Removalofproducts(this.shopdetail.id).then(res=>{
                if (res.code===200){
                    this.$message.success("下架该商品成功！")
                    //此处应当返回下架原因给商家，但是我比较懒写前端所以不写了
                }
            })
        },
        //获取商品图片
        getuseravatar(){
            getAvatar(this.shopdetail.username).then(response => {
                // 处理响应数据
                this.imgurl = response.data.url
            })
                .catch(error => {
                    // 处理错误
                    console.error(error);
                });
        },
        //将商品图片存到数组
        shopimgassignment() {
            this.imgList.push(this.shopdetail.shopimg)
            this.imgList.push(this.shopdetail.shopimg02)
            this.imgList.push(this.shopdetail.shopimg03)
        },
        //返回方法
        back() {
            this.$router.push({path: '/'})
        },
        //判定购买数量是否超过余量
        handleChange(value) {
            if (value > this.shopdetail.quantity) {
                this.buyNum = this.shopdetail.quantity;
                this.$message({
                    message: '购买数量不能超过余量',
                    type: 'warning'
                });
            }

        }
    }
}
</script>

<style scoped>
/*商家头像大小*/
.userMessage {

    overflow:hidden;
    width: 55px;
    border-radius: 50%;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}


/*商品页样式*/
body {
    font-family: 'Microsoft YaHei';
    color: #666;
    font-size: 12px;
}

.user_login a {
    color: #666;
}

.user_login a:hover {
    color: #f80;
}

.search_con .input_text {
    width: 470px;
    height: 37px;
    border: 0px;
    margin-left: 37px;
    outline: none;
}

.search_con .input_btn {
    width: 100px;
    height: 38px;
    background-color: #37ab40;
    border: 0;
    font: 14px/38px 'Microsoft YaHei UI';
    color: #fff;
    /*鼠标变成手*/
    cursor: pointer;
}

.subnav_con h1 {
    width: 200px;
    height: 40px;
    background-color: #37ab40;
    font: 14px/40px 'Microsoft YaHei UI';
    text-align: center;
    color: #fff;
}

.subnav_con i {
    width: 11px;
    height: 7px;
    /*background:url(../images/down.png) left center no-repeat;*/
    overflow: hidden;
    display: inline-block;
}

.navlist li {
    float: left;
    height: 14px;
    padding: 0 25px;
    border-left: 1px solid #666;
    margin-left: -2px;
    margin-top: 13px;
}

.submena a {
    color: #37ab40;
    line-height: 30px;
}


.center_con .main_menu {
    width: 350px;
    height: 350px;
    overflow: hidden;
}

.goods_detail_list h3 {
    font-size: 24px;
    line-height: 24px;
    color: #666;
    font-weight: normal;
}

.goods_detail_list p {
    color: #666;
    line-height: 40px;
}

.prize_bar {
    height: 72px;
    background-color: #fff5f5;
    line-height: 72px;
}

.prize_bar .show_prize {
    font-size: 20px;
    color: #ff3e3e;
    padding-left: 20px
}

.prize_bar .show_pirze em {
    font-style: normal;
    font-size: 36px;
    padding-left: 10px
}

.prize_bar .show_unit {
    padding-left: 150px;
}

.goods_num {
    height: 52px;
    margin-top: 19px;
    /*background: yellow;*/
}

.goods_num .num_name {
    width: 70px;
    height: 52px;
    line-height: 52px;
}

.goods_num .num_add {
    width: 75px;
    height: 50px;
    border: 1px solid #dddddd;
}

.goods_num .num_add .num_show {
    width: 49px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border: 0px;
    outline: none;
    font-size: 14px;
    color: #666;
}

.goods_num .num_add .add, .goods_num .num_add .minus {
    width: 25px;
    line-height: 25px;
    text-align: center;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    color: #666;
    font-size: 14px;
}

.goods_num .num_add .minus {
    border-bottom: 0px;
}

.total {
    height: 35px;
    line-height: 35px;
    margin-top: 25px;
    /*background: yellow;*/
}

.total em {
    font-style: normal;
    color: #ff3e3e;
    font-size: 18px
}

.operate_btn {
    height: 40px;
    margin-top: 35px;
    font-size: 0;
    position: relative;
}

.operate_btn .buy_btn, .operate_btn .add_cart {
    margin-left: 30%;
    display: inline-block;
    width: 178px;
    height: 38px;
    border: 1px solid #c40000;
    font-size: 14px;
    color: #c40000;
    line-height: 38px;
    text-align: center;
    background-color: #ffeded;
}

.operate_btn .add_cart {
    background-color: #c40000;
    color: #fff;
    margin-left: 10px;
    position: relative;
    z-index: 10;
}

body, p, h1, h2, h3, h4, h5, h6, ul, dl, dt, form, input {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

em {
    font-style: normal;
}

img {
    border: 0px;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}


.fl {
    float: left;
}


</style>
